<template>
  <div class="appointment-form-modal" v-if="visible" @click.self="close">
    <div class="appointment-form-container">
      <div class="form-header">
        <h3>{{ formTitle }}</h3>
        <button class="close-button" @click="close">&times;</button>
      </div>

      <form @submit.prevent="submitForm">
        <div class="form-group">
          <label>选择科室</label>
          <select v-model="formData.department" required>
            <option value="">请选择科室</option>
            <option v-for="dept in departments" :value="dept" :key="dept">{{ dept }}</option>
          </select>
        </div>

        <div class="form-group">
          <label>选择医生</label>
          <select v-model="formData.doctor" required :disabled="!formData.department">
            <option value="">请选择医生</option>
            <option v-for="doc in filteredDoctors" :value="doc.name" :key="doc.id">{{ doc.name }} ({{ doc.title }})</option>
          </select>
        </div>

        <div class="form-group">
          <label>预约日期</label>
          <input type="date" v-model="formData.date" required :min="minDate">
        </div>

        <div class="form-group">
          <label>预约时间</label>
          <select v-model="formData.time" required>
            <option value="">请选择时间段</option>
            <option v-for="slot in timeSlots" :value="slot" :key="slot">{{ slot }}</option>
          </select>
        </div>

        <div class="form-group">
          <label>症状描述</label>
          <textarea v-model="formData.symptoms" rows="3" placeholder="请简要描述您的症状"></textarea>
        </div>

        <div class="form-actions">
          <button type="button" class="cancel-button" @click="close">取消</button>
          <button type="submit" class="submit-button">提交预约</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, watch} from 'vue'

const props = defineProps({
  visible: Boolean,
  formTitle: {
    type: String,
    default: '新建预约'
  }
})

const emit = defineEmits(['update:visible', 'submit'])

const formData = ref({
  department: '',
  doctor: '',
  date: '',
  time: '',
  symptoms: ''
})

// 模拟科室数据
const departments = ref([
  '内科', '外科', '儿科', '妇产科', '眼科',
  '耳鼻喉科', '口腔科', '皮肤科', '中医科'
])

// 模拟医生数据
const doctors = ref([
  {id: 1, name: '李医生', title: '主任医师', department: '内科'},
  {id: 2, name: '王医生', title: '副主任医师', department: '内科'},
  {id: 3, name: '张医生', title: '主治医师', department: '外科'},
  {id: 4, name: '刘医生', title: '主任医师', department: '儿科'},
  {id: 5, name: '陈医生', title: '副主任医师', department: '妇产科'}
])

// 可用时间段
const timeSlots = ref([
  '08:00-08:30', '08:30-09:00', '09:00-09:30', '09:30-10:00',
  '10:00-10:30', '10:30-11:00', '11:00-11:30', '11:30-12:00',
  '13:30-14:00', '14:00-14:30', '14:30-15:00', '15:00-15:30',
  '15:30-16:00', '16:00-16:30', '16:30-17:00'
])

// 计算属性 - 根据科室筛选医生
const filteredDoctors = computed(() => {
  if (!formData.value.department) return []
  return doctors.value.filter(doc => doc.department === formData.value.department)
})

// 计算最小可选日期 (今天)
const minDate = computed(() => {
  const today = new Date()
  return today.toISOString().split('T')[0]
})

// 重置表单
const resetForm = () => {
  formData.value = {
    department: '',
    doctor: '',
    date: '',
    time: '',
    symptoms: ''
  }
}

// 关闭表单
const close = () => {
  emit('update:visible', false)
  resetForm()
}

// 提交表单
const submitForm = () => {
  const appointment = {
    ...formData.value,
    appointmentTime: `${formData.value.date}T${formData.value.time.split('-')[0]}:00`,
    status: 'pending'
  }
  emit('submit', appointment)
  close()
}

// 监听可见性变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    resetForm()
  }
})
</script>

<style scoped>
.appointment-form-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.appointment-form-container {
  background-color: white;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8fafc;
  border-bottom: 1px solid #eee;
}

.form-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

form {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.form-group select,
.form-group input[type="date"],
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.cancel-button,
.submit-button {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-button {
  background-color: #f0f0f0;
  color: #666;
  border: 1px solid #ddd;
}

.cancel-button:hover {
  background-color: #e0e0e0;
}

.submit-button {
  background-color: #409eff;
  color: white;
  border: 1px solid #409eff;
}

.submit-button:hover {
  background-color: #66b1ff;
}
</style>
